<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryParams" size="small" :inline="true" label-width="68px">
      <el-form-item label="设备" prop="deviceName">
        <el-select v-model="queryParams.deviceName" filterable placeholder="请选择设备"
                   @change="dataLocationAndNameByDeviceId">
          <el-option
              v-for="device in deviceList"
              :key="device.id"
              :label="device.name"
              :value="{ value: device.id, label: device.name }"
          ></el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="点位" prop="locationName">
        <el-select v-model="queryParams.locationName"  clearable  filterable placeholder="请选择设备" @change="splitValue ">
          <el-option
              v-for="data in dataLocationLists"
              :key="data.id"
              :label="data.name"
              :value="{ value: data.id, label: data.name }"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="时间" prop="datetime">
        <el-date-picker
            v-model="queryParams.datetimeRange"
            type="datetimerange"
            :picker-options="pickerOptions"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            value-format="yyyy-MM-dd HH:mm:ss"
        align="right">
        </el-date-picker>


      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
                <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>
    <el-divider></el-divider>
    <el-row>
      <el-table
          ref="table"
      :data="table.rows"
      style="width: 100%"
      v-loading="loading"
      height="840px"
      class="auto-width-table"
      >
        <el-table-column
            v-for="data in table.cols"
            :prop="data.location"
            :label="data.name"
            :fixed="data.fixed"
            :show-overflow-tooltip="true"
            align="center"
        >
        </el-table-column>

      </el-table>
      <pagination
          v-show="total>0"
          :total="total"
          :page.sync="queryParams.pageNum"
          :limit.sync="queryParams.pageSize"
          :page-sizes="[25,35, 50, 80]"
          @pagination="handleQuery"
      />
    </el-row>


  </div>
</template>

<script>
import {deviceLists} from "@/api/energy/equipment";
import {dataLocationAndNameByDeviceId} from "@/api/dataAnalysis/transient";
import {queryHistoricalData} from "@/api/dataAnalysis/history";
import tab from "@/plugins/tab";

export default {
  name: "History",
  computed: {
    tab() {
      return tab
    }
  },
  dicts: ['equipment_status'],
  data() {
    return {
      loading: false,
      deviceList: [],
      dataLocationLists: [],
      queryParams: {
        deviceId: null,
        deviceName: null,
        locationId: null,
        locationName: null,
        datetimeRange: null,
        pageNum: 1,
        pageSize: 25,
      },
      table:{
        cols: [],
        rows: [],
      },
      total: 0,

      pickerOptions: {
        shortcuts: [{
          text: '最近一周',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近一个月',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近三个月',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
            picker.$emit('pick', [start, end]);
          }
        }]
      },
      value: "",
    };
  },
  created() {
    this.deviceLists();
  },
  mounted() {

  },
  methods: {
    deviceLists() {
      deviceLists('3').then(res => {
        this.deviceList = res.data;
      });
    },
    splitValue(data) {
      const {value, label} = data;
      this.queryParams.locationId = value;
      this.queryParams.locationName = label;
    },
    dataLocationAndNameByDeviceId(data) {
      this.queryParams.locationId = null;
      this.queryParams.locationName = null;
      const {value, label} = data;
      this.queryParams.deviceId = value;
      this.queryParams.deviceName = label;
      dataLocationAndNameByDeviceId(this.queryParams.deviceId,'3').then(res => {
        this.dataLocationLists = res.data;
      })
    },
    /** 搜索按钮操作 */

    handleQuery() {
      if (this.queryParams.deviceId == null ||
          this.queryParams.datetimeRange == null) {
        this.$message({
          message: '请补全搜索条件',
          type: 'warning'
        });
        return
      }
      this.loading = true;
      queryHistoricalData(this.queryParams).then(res=>{
        this.total = res.data.rows.total;
        this.table.cols=res.data.cols
        this.table.rows=res.data.rows.rows
        this.loading = false;
      });
    },

    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.clearTable()
    },
    clearTable() {
      this.table.cols = [];
      this.table.rows = [];
      this.total = 0;
      this.$refs.table.reload()
    },

  }
};

</script>
<style>
.auto-width-table .el-table__header,
.auto-width-table .el-table__body {
  table-layout: auto;
  /*background-color: red;*/
}
</style>
